import React from 'react';
import Api from 'Utils/api';
import { Modal, Form, Input, Select, Radio, message } from 'antd';
import '../index.scss';

const Option = Select.Option;
const RadioGroup = Radio.Group;
const AddEditForm = Form.create()(
  (props) => {
    const { form } = props;
    const { getFieldDecorator } = form;

    return (
      <Form >
        <FormItem
          label="企业类别:"
        >
          {
            getFieldDecorator('type', {
              initialValue: '食品流通',
            })(
              <Select style={{ width: 260 }}>
                <Option value="食品流通">食品流通</Option>
                <Option value="餐饮服务">餐饮服务</Option>
                <Option value="食品生产">食品生产</Option>
                <Option value="药品经营">药品经营</Option>
                <Option value="保健食品">保健食品</Option>
                <Option value="化妆品">化妆品</Option>
                <Option value="医疗器械">医疗器械</Option>
              </Select>
            )
          }
        </FormItem >
        <FormItem
          label="时间范围:"
        >
          {
            getFieldDecorator('addr', {
              initialValue: '1m',
            })(
              <Select style={{ width: 260 }}>
                <Option value="1m">一个月</Option>
                <Option value="3m">三个月</Option>
                <Option value="1y">一年</Option>
              </Select>
            )
          }
        </FormItem >
        <FormItem
          label="检查次数:"
        >
          {
            getFieldDecorator('num', {
            })(
              <Input placeholder="请输入" style={{ width: 260 }} />
            )
          }
        </FormItem >
        <FormItem
          label="企业预警数:"
        >
          {
            getFieldDecorator('people', {
            })(
              <Input placeholder="请输入" style={{ width: 260 }} />
            )
          }
        </FormItem >
        <FormItem
          label="预警等级:"
        >
          {
            getFieldDecorator('degree', {
              initialValue: 1,
            })(
              <RadioGroup>
                <Radio value={1}>警示</Radio>
                <Radio value={2}>预警</Radio>
                <Radio value={3}>告警</Radio>
              </RadioGroup>
            )
          }
        </FormItem >
      </Form >
    );
  }
);
const FormItem = Form.Item;
class AddModal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  show(record) {
    console.log(record);
    this.setState({ visible: true });
  }
  close() {
    this.setState({
      visible: false,
    });
  }
  onOk() {
    const self = this;
    const formValue = this.form.getFieldsValue();
    console.log(formValue);
    const api = new Api({
      method: 'POST',
      path: '/warning/org',
      data: {
        category: formValue.type,
        time: formValue.addr,
        check_times: parseInt(formValue.num, 10),
        warn_times: parseInt(formValue.people, 10),
        warn_level: formValue.degree,
      },
      success: () => {
        message.success('添加成功');
        self.props.init();
        self.close();
      },
      error: (err) => {
        message.error(err);
        // self.close();
      }
    });
    api.run();
  }
  onCancel() {
    this.close();
  }
  render() {
    return (
      <Modal
        title="新增预警条件"
        wrapClassName="vertical-center-modal"
        visible={this.state.visible}
        className="add-organize-modal small-modal"
        onOk={this.onOk.bind(this)}
        onCancel={this.onCancel.bind(this)}
        width={798}
      >
        <div>
          <AddEditForm
            ref={(ref) => { this.form = ref; }}
          />
        </div>
      </Modal >
    );
  }
}

export default AddModal;

